<template>
    <theme-box title="店员添加">
        <form class="form-inline" @submit.prevent v-el:form>
            <div class="box-body">
                <div class="form-group clearfix primary">
                    <div class="check">
                    <label>店员新增方式：</label>
                        <input type="radio" value="" name="usr" id="old">券券用户
                        <input type="radio" value="" name="usr" id="new" style="margin-left: 20px">新增用户
                    </div>
                </div>
                <div for="random-id-4" class="account clearfix" style="display:none">
                    <form-input title="芸券号" :required="true" name="usrId" id='usrId' :value="usrId"></form-input>
                    <v-button theme="primary" class="pull-right checkBtn">验证</v-button>
                </div>
                <div class="info" style="display:none">
                    <form-select title="商户号" :required="true" name="mchtId" :options="mchtList"></form-select>
                    <form-select title="类型" :required="true" name="usrType" :options="usrOptions" class="type1"></form-select>
                    <form-select title="类型" :required="true" name="usrType2" :options="UsrOptions" class="type2"></form-select>
                    <form-input title="员工号" :required="true" name="tlrNo"></form-input>
                    <form-input title="名称" :required="true" name="usrName"></form-input>
                    <form-input title="账号" :required="true" name="usrAcc"></form-input>
                    <form-input title="登录密码" :required="true" name="loginPwd" type="password"></form-input>
                </div>
            </div>
            <!-- /.box-body -->
            <div class="box-footer confirmBtn">
                <v-button type="reset" @click="reset">重置</v-button>
                <v-button type="submit" theme="primary" class="pull-right" class="subBtn">确认</v-button>
            </div>
            <!-- /.box-footer -->
        </form>
    </theme-box>
</template>
<style>
    .check {
        padding-top: 5px;
        width: 400px;
        margin-left: 62px;
        margin-bottom: 20px;
    }

    .check input[type="radio"]:nth-child(1) {
        margin-left: 1%;
    }


    .checkBtn {
        margin-bottom: 5px;
    }

    .clearfix:after {
        clear: both;
        content: "";
        height: 0;
        display: block;
        overflow: hidden;
    }

    .account {
        position: relative;
    }
</style>
<script>
    import 'plugins/jquery-validation';
    import 'lib/md5.js';
    var serialize = require('form-serialize');

    export default {
        data: () => ({
            mchtList: [],
            usrOptions: [
                {key: "店员", value: "02"},
                {key: "店长", value: "03"}
            ],
            UsrOptions: [
                {key: "店员", value: "02"},
                {key: "店长", value: "03"},
                {key: "老板", value: "04"}
            ],

            usrId: ""
        }),
        watch: {

        },
        methods: {
            reset() {
                $("label.error").remove();
                //点击重置 所有状态回到最初
                $("#usrId").attr("disabled", false);
                this.$els.form.reset()

            },
            getMcht(data) {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: "/api/v2" + projectName_Url + "/list/mcht/mchtAgent/" + mchtId,
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    self.$set("mchtList", list);
                    self.mchtIdValue = list[0].value
                }, error => {
                });
            },
            getAccount() {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                var usrId = $("input[name='usrId']").val()
                var _data = {mchtId: mchtId, usrId: usrId}
                self.$post({
                    url: "/api/v3" + projectName_Url + "/plat/mchtusr/check",
                    data: _data,
                    method: "POST"
                }).then(response => {
                    $(".info").css("display", "");
                    $(".checkBtn").css("display", "none");
                    $(".confirmBtn").css("display", "");
                    $("#usrId").attr("disabled", true);
                }, error => {
                    $("#usrId").attr("disabled", false);
                });
            },
        },
        ready() {
            var self = this;
            self.getMcht()
            $(".checkBtn").click(function () {
                if (!$(self.$els.form).valid()) {
                    return
                }
                self.getAccount()
            })
            $("#old").click(function () {
                $(this).parents(".box-body").find(".account").css("display", "");
                $(this).parents(".box-body").find(".info").css("display", "none");
                $(this).parents(".box-body").find(".confirmBtn").css("display", "none");
                $(".checkBtn").css("display", "");
                $(".type1").css("display","");
                $(".type2").css("display","none");
            });
            $("#new").click(function () {
                $(this).parents(".box-body").find(".account").css("display", "none");
                $(this).parents(".box-body").find(".info").css("display", "");
                $(this).parents(".box-body").find(".confirmBtn").css("display", "");
                $(".type1").css("display","none");
                $(".type2").css("display","");
            });
            $(".confirmBtn").css("display", "none");

            //点击重置
            $(".check").click(function(){
                if($('#old').is(':checked')){
                    $("button[type=reset]").click(function(){
                        $(".account").css("display", "");
                        $(".info").css("display", "none");
                        $(".checkBtn").css("display", "");
                        $(".confirmBtn").css("display", "none");
                        $('#old').attr('checked',true);
                        $('#new').attr('checked',false);
                    });
                }
                if($('#new').is(':checked')){
                    $("button[type=reset]").click(function(){
                        $(".account").css("display", "none");
                        $(".info").css("display", "");
                        $(".confirmBtn").css("display", "");
                        $('#new').attr('checked',true);
                        $('#old').attr('checked',false);
                    });
                }
            })

            $(this.$els.form).validate({
                submitHandler: async function (form) {
                    var _data = serialize(this.currentForm, {
                        hash: true,
                        empty: true
                    });
                    //防止表单重复提交
                    $(".subBtn").click(function(){
                        $(this).attr("disabled","true"); //设置变灰按钮
                        setTimeout("$('.subBtn').removeAttr('disabled')",3000); //设置三秒后提交按钮 显示

                    })
                    //单选框必须选中
                    var radios = $("input[name = 'usr']");
                    for (var i = 0; i < radios.length; i++) {
                        if($("#new").is(":checked") || $("#old").is(":checked")) {

                        }
                        else{
                            Midway.alert({title: "操作提示", content:'店员新增方式必须选一个'});
                            return;
                        }
                    }
                    _data.usrId = $("input[name='usrId']").val();
                    //
                    var password = $("input[name='loginPwd']").val();
                    //加密成md5
                    var passwd = $.md5(password);
                    _data.loginPwd = passwd
                    if(document.getElementById("new").checked==true){
                        _data.usrType = _data.usrType2;
                        var result = await self.$post({
                            url: "/api/v3" + projectName_Url + "/plat/mchtusr/add",
                            data: _data,
                            method: "post"
                        }).then(response => {
                            let data = {
                                title: "操作成功",
                                content: "是否进入店员列表查看?"
                            }
                            $("#usrId").attr("disabled", false);
                            self.reset();
                            Midway.confirm(data).then(function () {
                                self.$route.router.go('/mchtUsr/list');
                            })
                        },error => {
                       // self.reset();
                        });
                    }else{
                        var result = await self.$post({
                            url: "/api/v3" + projectName_Url + "/plat/mchtusr/addUsr",
                            data: _data,
                            method: "post"
                        }).then(response => {
                            let data = {
                                title: "操作成功",
                                content: "是否进入店员列表查看?"
                            }
                            $("#usrId").attr("disabled", false);
                            self.reset();
                            Midway.confirm(data).then(function () {
                                self.$route.router.go('/mchtUsr/list');
                            })
                        },error => {
                       // self.reset();
                        });
                    }

                },

                rules: {
                    usrId: {
                        required: true,
                        int: true,
                    },
                    mchtId: {
                        required: true
                    },
                    tlrNo: {
                        required: true,
                        int: true,
                        min:1,
                        maxlength: 8
                    },
                    usrName: {
                        required: true,
                        maxlength: 4
                    },
                    usrType: {
                        required: true
                    },
                    usrAcc: {
                        required: true,
                        maxlength: 10,
                        minlength:4
                    },
                    loginPwd: {
                        required: true,
                        maxlength: 15,
                        minlength: 8
                    }
                }
            });
        }
    }
</script>
